<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 设置为无缓存模式 -->
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>中通快递单</title>

    <link rel="shortcut icon" href="favicon.ico">
    <script src="../../../res/plugins/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../res/plugins/layerui/layer/layer.js"></script>
    <script src="../../../res/js/openx.js"></script>
    <script src="../../../js/order/print/jquery-barcode.js"></script>

</head>

<body>
<style>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Microsoft Yahei";
    }

    body {
        background-color: #fff;
        font-size: 10pt;
    }

    .content {
        padding: 1mm;
        width: 100mm;
        height: 180mm;
        background-color: #fff;
        margin: 0 auto;
        border: 1px solid #000;
    }

    .top {
        height: 9mm;
        border-bottom: 1px solid #000;
        overflow: hidden;
    }

    .middle {
        height: 13mm;
        border-bottom: 1px solid #000;
        overflow: hidden;
    }

    .top img{
        height: 100%;
    }

    .flexMain {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .flexend {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
        -webkit-box-align: end;
        -moz-box-align: end;
    }

    .flexAlign {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-align: center;
        -moz-box-align: center;
    }

    .bignum {
        height: 15mm;
        line-height: 15mm;
        font-size: 20pt;
        text-align: center;
        border-bottom: 1px solid #000;
        font-weight: bold;
    }

    .jibox {
        height: 10mm;
        border-bottom: 1px solid #000;
    }

    .jimg {
        width: 10mm;
        text-align: center;
        font-weight: bold;
        font-size: 0;
    }

    .jimg span {
        font-size: 15pt;
    }

    .jimg img {
        width: 7mm;
    }

    .jitext {
        font-size: 16pt;
        text-align: center;

    }

    .jicode {
        width: 24mm !important;
        border-left: 1px solid #000;
        height: 100%;
        line-height: 10mm;
        text-align: center;
    }

    .receive {
        height: 18mm;
        border-bottom: 1px solid #000;
    }

    .receive-2 {
        height: 12mm;
        border-bottom: 1px solid #000;
    }

    .receivetext {
        width: 90mm;
        font-weight: bold;
        font-size: 10pt;
    }


    .codebig {
        width: 100%;
        height: 22mm;
        border-bottom: 1px solid #000;
    }

    .codebig img{
        margin: 0 auto;
        display: block;
    }

    .timebox {
        height: 26mm;
        border-bottom: 6px solid #000;
    }

    .time {
        width: 50%;
        height: 100%;
        padding: 1mm 0 1mm 1mm;
        position: relative;
        font-size: 10pt;
    }

    .time p{
        padding-left: 5pt;
    }

    .timetext {
        width: 50%;
        height: 100%;
        font-size: 6pt;
        position: relative;
        line-height: 3.5mm;
        padding: 1mm;
        border-right: 1px solid #000;
    }

    .addtitle{
        height: 100%;
        border-right: 1px solid #000;
        padding-right: 3pt;
    }


    .addtext{
        font-size: 8pt;
        padding: 0 4pt;
        line-height: 10pt;
    }

    .height-100{
        height: 100%;
    }

    .text-right{
        text-align: right;
    }

    .serverBox{
        height: 30mm;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        width: 24mm !important;
        font-size: 5pt;
        line-height: 10pt;
    }

    .serverTitle{
        height: 5mm;
        line-height: 5mm;
        text-align: center;
        border-bottom: 1px solid #000;
    }

    .margin-bottom{
        margin-bottom: 2mm;
    }

    .user_def{
        height: 18mm;
        position: relative;
        overflow: hidden;
        padding: 0 3pt;
    }

    .flex-column{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
</style>
<div class="content">
    <div class="top flexend flexAlign">
         <div style="width:172px;height:72px"></div>
        <div style="margin-left:60px"><b>标准快递</b></div>
    </div>
    <div class="bignum" name="mark"></div>
    <div class="jibox flexAlign">
        <div class="jitext flexMain" name="bagAddr"></div>
        <div class="jicode" id="nowDate"></div>
    </div>

    <div class="flexAlign">
        <div class=" flexMain">
            <div class="receive flexAlign">
                <div class="addtitle flex-column">收<br>件</div>
                <div class="flexMain addtext">
                    <p name="receiverNamePhone"></p>
					<p name="receiverAddress"></p>
                </div>
            </div>
            <div class="receive-2 flexAlign">
                <div class="addtitle flex-column">寄<br>件</div>
                <div class="flexMain addtext">
                    <p name="sendNamePhone"></p>
					<p name="sendAddress"></p>
                </div>
            </div>
        </div>
        <div class="serverBox" >
            <div class="serverTitle" style="height:25px">服务</div>
            <div class="flex-column" style="padding:0 1pt;height:70pt;">
                <div>代收金额：<span></span></div>
                <div>预约配送：<span></span></div>
                <div>声明价值：<span></span></div>
            </div>
        </div>
    </div>

    <div class="codebig flexAlign">
        <div class="flexMain" id="barcodeOne">条形码</div>
    </div>

    <div class="timebox flexAlign">
        <div class="timetext flexMain flex-column">快件送达收件人地址，经收件人或收件人(寄件人)允许的代收人签字，视为送达。您的签字代表您已验收此包裹，并已确认商品信息无误、包装完好、没有划痕、破损等表面质量问题。</div>
        <div class="time flex-column">
            <p>签收人：</p>
            <p>时间：</p>
        </div>
    </div>

    <div class="middle flexend flexAlign" style="height:70px">
        <div style="width: 86px;height:37px"></div>
        <div class="flexMain text-right" style="margin-left:20px">
            <div class="flexMain" id="barcodeTwo">条形码</div>
        </div>
    </div>

    <div class="flexAlign">
        <div class="flexMain" >
            <div class="receive flexAlign">
                <div class="addtitle flex-column">收<br>件</div>
                <div class="flexMain addtext">
                    <p name="receiverNamePhone"></p>
					<p name="receiverAddress"></p>
                </div>
            </div>
            <div class="receive-2 flexAlign">
                <div class="addtitle flex-column">寄<br>件</div>
                <div class="flexMain addtext">
                    <p name="sendNamePhone"></p>
					<p name="sendAddress"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="sandr">
        <div class="user_def" ><p name="pickSerialNumber"></p></div>
        <div class="text-right">已验视</div>
    </div>
</div>
</body>

<script type="text/javascript">

var deliveryCode = UrlParameter()['deliveryCode'];
var logisticsId = UrlParameter().logisticsId;
    if (deliveryCode) {
        $X("/logistics/logisticsListService", "getPrintInfo").callx({
            deliveryCode: deliveryCode,
            logisticsId:logisticsId,
            onResult: function (data) {
                layer.closeAll('loading')
            
                if (data) initContent(data);

                
            }, onError: function (error) {
                var res = JSON.parse(error);
                layer.msg("打印失败原因：" + res.message)
            }
        });
    } else {
        window.alert('deliveryCode is not defined');
    }



    function initContent(data) {
        $('p[name="receiverNamePhone"]').html((data.receiverName !== undefined ? data.receiverName : '') + '  ' + (data.receiverPhone !== undefined ? data.receiverPhone : ''));
        $('p[name="receiverAddress"]').html(data.receiverAddress !== undefined ? data.receiverAddress : '');
        $('p[name="sendNamePhone"]').html((data.sendName !== undefined ? data.sendName : '') + '  ' + (data.sendPhone !== undefined ? data.sendPhone : ''));
        $('p[name="sendAddress"]').html(data.sendAddress !== undefined ? data.sendAddress : '');
        $('div[name="bagAddr"]').html(data.packageCenterName !== undefined ? data.packageCenterName : '');
        $('div[name="mark"]').html(data.packageCenterCode !== undefined ? data.packageCenterCode : '');
        $('#nowDate').html(new Date().format("yyyy/MM/dd"));
        $('p[name="pickSerialNumber"]').html(data.pickSerialNumber !== undefined ? '#'+data.pickSerialNumber : '');

        
        $("#barcodeOne").empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth: 2,
            barHeight: 50,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
		$("#barcodeTwo").empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth: 2,
            barHeight: 50,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
		 
        setTimeout(function () {
            window.print();
        }, 500);
    }

</script>


</html>
